<template>
	<view>

		<!--  -->
		<view class="margin">
			<view style="display: flex;justify-items: center;align-items: center;padding: 30rpx 0 ;">
				<view class="left-line  mr10"></view>
				<h4 class="size_17">非遗处方</h4>
			</view>
			<!-- 选项 -->
			<u-tabs :list="list1" keyName="classifyName" @click="click"></u-tabs>
			<br>
			<!-- 框 -->
			<!--  -->
			<!-- 						<image class="mb9" :src="citem.remark || '/static/logo.png'" alt=""
				style="width: 216rpx;height: 174rpx;" /> -->
			<view class="">
				<view class="vList flex " style="flex-wrap: wrap;justify-content: space-around;">
					<view v-for="(citem,cindex) in cufangList" :key="cindex" class="vItem flex_row bg-white "
						@click="open()" style="align-items: center;border-radius: 20rpx;">
						<image class="mb-10" src="http://storage.dezhoucloud.com/img/goods/goods.png" alt=""
							style="width: 216rpx;height: 174rpx;" />
						<view class="size_14 mb6 rt2 nowrap text-center " style="width: 200rpx;text-align: center;">
							{{citem.ichPrescriptionName || '非遗处方'}}
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<!-- 内容 -->
			<!-- 提示 -->
			<view class="" @touchmove.stop.prevent="() => {}">
				<u-popup :show="show" mode="bottom" @close="close" @open="open" :closeable="true">
					<view class="">
						<view class="h44">	
						</view>
						<u-cell v-for="(item,index) in dList">
							<view slot="title" class="u-slot-title flexflex">
								<view class="mr10 font_b" style="width: 80rpx;">
									{{item.name}}
								</view>
								<view class="text-ellipsis color_84">
									{{item.des}}
								</view>
							</view>
						</u-cell>
						<view class="yesBtn flex-cen margin mt10 ms10" @click="show = false">
							<view class="color_white size_16">
								完成
							</view>
						</view>
					</view>
				</u-popup>
			</view>
			<!--  -->

			<u-row customStyle="margin-bottom: 10px" v-if="false">
				<u-col span="3">
					<view class="title ml20 mt15 font-b size_18">
						非遗验方
					</view>
				</u-col>
				<u-col span="12">

				</u-col>
			</u-row>



		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 分类 */
				list1: [],
				/* 遗方id */
				ichPrescriptionId: null,
				/* 处方 */
				cufangList: [{
					url: "http://storage.dezhoucloud.com/img/hos/bg.png",
					name: "中医视频课程",
					des: "中西医结合内科导学"
				}, ],

				/* 处方内容 */
				show: false,
				/* 详情 */
				dList: [{
						name: "组成",
						des: "大黄30g 生姜30g 大白15g"
					},
					{
						name: "功用",
						des: "攻下散瘀，行气止痛"
					},
					{
						name: "加减",
						des: "若局部瘀血肿痛严重者，原方加当归15 g、丹参20 g、乳香15 g、没药15 g；若合并腹胀，大小便不通者，原方加枳壳15 g、厚朴12 g、木通10 g、车前子10 g。若下肢牵掣疼痛严重者，原方加黄芪30 g、地龙12 g、木瓜15 g牛膝10g。"
					},
					{
						name: "功用",
						des: "攻下散瘀，行气止痛"
					},
					{
						name: "主治",
						des: "重症闪扭腰伤，疼痛不能转侧，大便秘结，体质健壮者"
					},
					{
						name: "源流",
						des: "本方为高云峰院长经验方，首载于《正骨学讲义》，《平乐正骨》转载。应用临床效果显著，在河洛地区及平乐正骨学派范围内应用广泛。现临床中多经手法整复胸腰椎关节错缝后，加味应用本方。本方有逐瘀利水作用。类同于西医甘露醇脱水作用"
					},

				]
			};
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(options.data)
				console.log(data, "data");
				this.ichPrescriptionId = data.ichPrescriptionId
			}
		},
		onShow() {
			/* ？ */
			this.getFeiyi()
			// this.getListCate()
			// this.getList()
			// this.loadMore()
		},
		methods: {
			async getFeiyi() {
				this.request({
					url: '/TraditionalRecipeApi/selectList',
				}).then(res => {
					this.cufangList = res.data
				})
			},

			loadMore() {
				console.log(this.list1, "this.list1this.list1this.list1this.list1");
			},
			async getListCate() {
				let re = await this.$API.feiyiApi.getListCate()
				this.list1 = re
				this.request({
					url: `/XtPrescription/selectList?ichPrescriptionId=${this.ichPrescriptionId}&classifyId=${this.list1['0'].classifyId}`,
				}).then(res => {
					this.cufangList = res.data
				})
			},
			async getListByids(ichPrescriptionId, classifyId) {
				this.request({
					url: `/XtPrescription/selectList?ichPrescriptionId=${ichPrescriptionId}&classifyId=${classifyId}`,
				}).then(res => {
					this.cufangList = res.data
				})
			},
			click(item) {
				console.log('item', item);
				this.getListByids(this.ichPrescriptionId, item.classifyId)
			},
			open() {
				// console.log('open');
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style>
	page {
		background: #f5f6f7;
	}
</style>

<style lang="scss" scoped>
	page {
		background: #f5f6f7;
	}

	::v-deep .u-row {
		align-items: flex-start !important;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>